import React, { useEffect, useRef, useState, useCallback } from 'react'
import { Text, View, StyleSheet, Image, SafeAreaView, TextInput } from 'react-native'
import { Button, Toast } from '@ant-design/react-native'
import { pTx } from '../../utils/dimensions';
import { asyncGetGroupList, SetGroupMsg } from "../../redux/features/appSlice"
import { formatGroupMsg } from "../../utils/formatFriendMsg"
import { connect } from 'react-redux'
import { useRealm, useQuery } from '@realm/react'
import { schemaName } from "../../realm"
import Realm from "realm"
import ShadowCard from "../../utils/shadowCard"
import LinearGradient from 'react-native-linear-gradient';
import httpApi from "../../api"


const SendGroupJoin = (props) => {
    const [address] = useState(props.route.params.Address)
    const [message, setMessage] = useState("")
    const [loading, setLoading] = useState(false)
    const userInfo = useQuery(schemaName.UserInfo, userInfo => {
        return userInfo.filtered('Current = true');
    })[0];

    const sendFriendAdd = async () => {
        try {
            setLoading(true)
            const res = await httpApi.sendGroupJoin({
                address: address,
                message: message,
            })
            if (res.code != 20) {
                Toast.info(res.message)
            } else {
                if (props.route.params.Status == 0) {
                    await props.asyncGetGroupList(userInfo.Id)
                }
                props.navigation.navigate('chat')
            }
        } catch (error) {
            console.log(error)
        }
        setLoading(false)
    }
    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.SearchBarBox}>
                <View style={styles.row}>
                    <Text style={styles.label}>发送添加群申请</Text>
                    <TextInput style={[styles.textareaItem, { textAlignVertical: 'top' }]} numberOfLines={4} multiline={true}
                        onChangeText={(value) => setMessage(value)} />
                </View>
            </View>
            <View style={styles.footer}>
                <ShadowCard style={styles.button}>
                    <LinearGradient
                        colors={['rgba(51, 225, 144, 1)', 'rgba(68, 225, 240, 1)']}
                        start={{ x: 0.25, y: 0.25 }}
                        end={{ x: 0.75, y: 0.75 }}
                        style={[styles.linearGradient, styles.button]}>
                        <Button type="primary" loading={loading} disabled={loading} style={[styles.new, styles.button]} onPress={sendFriendAdd}>
                            <Text style={styles.ButtonText}>发送</Text>
                        </Button>
                    </LinearGradient>
                </ShadowCard>
            </View>
        </SafeAreaView>
    )
}
const mapStateToProps = (state) => state.app

const mapDispatchToProps = {
    asyncGetGroupList,
    SetGroupMsg
}

export default connect(mapStateToProps, mapDispatchToProps)(SendGroupJoin)
const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingVertical: pTx(20),
        paddingHorizontal: pTx(20),
        backgroundColor: "#EDEDED",
    },
    textareaItem: {
        marginTop: pTx(12),
        marginBottom: pTx(20),
        backgroundColor: "#F7F7F7",
        borderRadius: pTx(6),
        borderColor: "#F7F7F7",
        borderWidth: 0,
        fontSize: pTx(16),
        paddingHorizontal: pTx(15),
        paddingVertical: pTx(10),
    },
    name: {
        fontSize: pTx(14),
        paddingTop: pTx(12),
        paddingBottom: pTx(8),
        color: "#0A0C14"
    },
    footer: {
        marginTop: pTx(100),
        alignItems: "center"
    },
    linearGradient: {
        borderRadius: 6,
    },
    button: {
        height: pTx(55),
        backgroundColor: "transparent",
    },
    new: {
        borderWidth: 0,
        backgroundColor: "transparent",
        colors: "rgba(10, 12, 20, 1)",
    },
    import: {
        backgroundColor: "rgba(237, 237, 237, 1)",
        borderWidth: 0,
        borderRadius: 6
    },
    ButtonText: {
        color: "rgba(10, 12, 20, 1)",
        fontSize: pTx(14),
        fontWeight: 'bold'
    }
})